
{include file="layout/css"}
{include file="layout/header"}
<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
                <li class="layui-this">登入</li>
                <li><a href="register.html">注册</a></li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <form method="post">
                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="username" required lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_password" class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_captcha" class="layui-form-label">图形码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_captcha" name="captcha" required lay-verify="required" placeholder="请输入计算结果" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid" style="padding: 0!important;">
                                    <span style="color: #c00;"><img class="codeImage" src="https://api.laytp.com/captcha/login" width="100" height="38" /></span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn login" style="border-radius: 4px;background-color: #5FB878!important;height: 36px;line-height: 36px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);" lay-filter="login" lay-submit>立即登录</button>
                                <!--<span style="padding-left:20px;">-->
                                  <!--<a href="/user/forget">忘记密码？</a>-->
                                <!--</span>-->
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['facade','button','context'],function(){
        //点击验证码图片，获取新的验证码图片地址
        layui.$(document).off("click", ".codeImage").on("click", ".codeImage", function () {
            this.src = localStorage.getItem("apiDomain") + "/captcha/login?v=" + Math.random();
        });

        layui.form.on('submit(login)', function(data) {
            var buttonAnim = layui.button.load({elem: '.register'});
            data.field.session_id = facade.getCookie('PHPSESSID');
            facade.ajax({route: '/user/login', data: data.field}).done(function(res){
                if (res['code'] === 0) {
                    layui.context.put('user', res.data);
                    window.location.href = localStorage.getItem("wwwDomain");
                } else {
                    layui.$(".codeImage").click();
                    layui.$("#L_captcha").val('');
                }
                buttonAnim.stop();
            }).fail(function(){
                buttonAnim.stop();
            });
            return false;
        });
    });
</script>
{include file="layout/footer"}
</body>

</html>